<template>
    <el-container>
      <el-header>
        <div style="margin-top: 10px">
          <el-row class="demo-autocomplete">
            <el-col :span="5">
              <el-button type="danger" size="small" @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="danger" size="small" @click="toggleSelection()">取消选择</el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="danger" size="small" @click="addDialog = true">提交选择</el-button>
            </el-col>

            <el-col :span="8" :push="5">
              <el-input
                v-model="search"
                size="small"
                placeholder="输入关键字根据邮件主题模糊搜索"
                @change="detect(tableDataStorage)"
                suffix-icon="el-icon-date"
              />
            </el-col>
          </el-row>
        </div>
      </el-header>

      <el-main>
        <el-table
          ref="multipleTable"
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="senderDate" label="发信日期" show-overflow-tooltip></el-table-column>
          <el-table-column prop="subject" label="邮件主题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="senderName" label="发件人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="senderAddress" label="发件人地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="recipientAddressList" label="收件人地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cc" label="抄送人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="bcc" label="密送人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="replySign" label="回执" show-overflow-tooltip></el-table-column>
          <el-table-column prop="containAttachment" label="附件" show-overflow-tooltip></el-table-column>
          
        </el-table>
      </el-main>

      <el-footer > 
        <!-- 分页 -->
        <el-pagination
          style="margin-top: -40px;float:left"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[6, 8, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </el-footer>
 

    <el-dialog title="提示" :visible.sync="addDialog" width="30%" center>
      <span>确认要添加以下的邮件进入索引库吗？</span>
      <ul>
        <li v-for="(Selection,index) in selection" :key="index">
          <label>{{index+1}}. {{Selection.emlName}}<br>{{Selection.subject}}</label>
        </li>
      </ul>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false;selection=[]">取 消</el-button>
        <el-button type="primary" @click="addDialog = false;saveToIndex();selection=[]">确认提交</el-button>
      </span>
    </el-dialog>
   </el-container>
</template>

<script>
import axios from "axios";
import { emlPath } from "./config/config";
export default {
  data() {
    return {
      emlPath: encodeURIComponent(emlPath[0]),
      selection: [],
      tableData: [],
      tableDataStorage: [], //tableDataStorage保存tableData一样的数据
      multipleSelection: [],
      //分页
      currentPage: 1, //初始页
      pagesize: 6, //    初始每页的数据
      //模糊搜索
      search: "",
      addDialog: false
    };
  },
  created() {
    this.getInit();
  },
 computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  methods: {
    saveToIndex() {
      console.log("this.selection",this.selection);
      axios
        .put("/api/EmlRepositoryController/emailsSave?userName="+this.userSO_json.userName, this.selection,{
           headers: {
            //头部信息
            "Content-Type": "application/json;charset=utf-8",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          let obj=response.data;
             if (obj.code == 200) {
            this.$message({
              showClose: true,
              message: "恭喜你，这是一组入库成功消息",
              type: "success"
            });
          }
        })
        .catch(error => {
          console.log(error);
          alert("网络错误，不能访问");
        });
      for (let i = 0; i < this.selection.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          if (this.selection[i].emlName == this.tableData[j].emlName) {
            this.tableData.splice(j, 1); //这种删除方式会自动更新长度，慎用
            this.tableDataStorage.splice(j,1);
            j--;
          }
        }
      }
    },
    getInit() {
      axios
        .get("/api/EmlWithoutIndexController/withoutIndex?userName="+this.userSO_json.userName,{
           headers: {
            //头部信息
            "Content-Type": "application/json;charset=utf-8",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          let list = response.data.data;
          console.log(list);
          this.tableData = list;
          this.tableDataStorage = list;
        })
        .catch(error => {
          console.log(error);
          alert("网络错误，不能访问");
        });
    },
    //复选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for (let j = 0; j < val.length; j++) {
        this.selection[j] = val[j];
      }
    },
    //分页
    // 初始每页数据数pagesize
    handleSizeChange(size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    //初始页currentPage
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    //模糊搜索

    detect(val) {
      let temp = [];
      let self = this;
      temp = JSON.parse(JSON.stringify(val));
      let search = this.search;
      var count = 0;
      for (let i = 0; i < temp.length; i++) {
        // if (!(temp[i].name === emlName)) {
        if (temp[i].subject.split(search).length == 1) {
          console.log(temp[i].subject);
          temp.splice(i, 1); //这种删除方式会自动更新长度，慎用
          i--;
          count++;
          console.log("删除");
        }
      }

      console.log(count);
      self.tableData = temp;
    }
  }
};
</script>

<style  scoped>
.el-footer {
  height: 40px;
  width: 100%;
  background-color: #ddd;
  position: fixed;
  bottom: 0;
}
</style>




